<template>
  <div class="index">
    <a-form :model="formData" ref="refForm" :rules="rules" auto-label-width>
      <a-form-item label="被考核人员" field="" show-colon>
        {{ formData?.userInfo?.name }}
      </a-form-item>
      <a-form-item label="考核周期" field="" show-colon>
        {{ `${formData.cycleStart} 至 ${formData.cycleEnd}` }}
      </a-form-item>
      <a-form-item label="考核方案确认人" field="" show-colon>
        {{ formData?.userInfo?.name }}
      </a-form-item>
      <a-form-item
        label="考核方案确认截止时间"
        field="confirmationDeadline"
        show-colon
      >
        <a-date-picker
          v-model="formData.confirmationDeadline"
          style="width: 200px"
          :disabledDate="disabledDate"
        />
      </a-form-item>
      <a-form-item
        label="确认截止时间未确认将视为"
        field="defaultState"
        show-colon
      >
        <a-radio-group v-model="formData.defaultState">
          <a-radio :value="1">默认通过</a-radio>
          <a-radio :value="2">不通过</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="考核结果确认人"
        field="resultConfirmerName"
        show-colon
      >
        <a-space>
          <span>{{ formData.resultConfirmerName }}</span>
          <a-button type="outline" shape="circle" @click="selectHuman">
            <template #icon>
              <icon-plus />
            </template>
          </a-button>
        </a-space>
      </a-form-item>
      <a-form-item
        label="考核结果确认截止时间"
        field="resultConfirmeTime"
        show-colon
      >
        <a-date-picker
          v-model="formData.resultConfirmeTime"
          style="width: 200px"
          :disabledDate="disabledDate"
        />
      </a-form-item>
    </a-form>
  </div>
  <HumanModal
    v-model:visible="humanModalVisible"
    :data="currentHumanList"
    @submit="submit"
  />
  <HumanRosterModal
    v-model:visible="humanRosterVisible"
    @humanRosterEmit="selectHuman"
  />
</template>

<script setup lang="ts">
import { cloneDeep } from 'lodash';
import type { ProbationExamine } from '@/apis/human/base/variationManager/probation/type';
import { useVModel } from '@vueuse/core';
import HumanModal from './Tool/AbilityIndeTable/HumanMadal/index.vue';
import HumanRosterModal from '@/components/HumanRosterModal/index.vue';
import dayjs from 'dayjs';

const props = withDefaults(
  defineProps<{
    templateData: ProbationExamine;
  }>(),
  {}
);
const emit = defineEmits(['update:templateData']);
const formData = useVModel(props, 'templateData', emit);
const rules = reactive({
  name: [
    {
      required: true,
      message: '请输入'
    }
  ],
  confirmationDeadline: [
    {
      required: true,
      message: '请输入'
    }
  ],
  defaultState: [
    {
      required: true,
      message: '请输入'
    }
  ],
  resultConfirmerName: [
    {
      required: true,
      message: '请输入'
    }
  ],
  resultConfirmeTime: [
    {
      required: true,
      message: '请输入'
    }
  ]
});
const refForm = ref();
const validate = async () => {
  const check = await refForm.value.validate();
  console.log('check', check);

  return check;
};
const humanModalVisible = ref(false);
const currentHumanList = ref<any[]>([]);
const submit = () => {
  const { id, name } = currentHumanList.value[0];
  formData.value.resultConfirmer = id;
  formData.value.resultConfirmerName = name;
};
const setHuman = () => {
  const { resultConfirmer, resultConfirmerName } = formData.value;
  currentHumanList.value = [{ id: resultConfirmer, name: resultConfirmerName }];
  humanModalVisible.value = true;
};
const humanRosterVisible = ref(false);
const selectHuman = (data: any) => {
  humanRosterVisible.value = true;
  const { id, name } = data;
  formData.value.resultConfirmer = id;
  formData.value.resultConfirmerName = name;
};
const disabledDate = (date: any) => {
  const { cycleStart, cycleEnd } = formData.value;
  const startDate = dayjs(cycleStart);
  const endDate = dayjs(cycleEnd);
  return date < startDate;
};
defineExpose({ validate });
</script>

<style lang="less" scoped>
.index {
  width: 800px;
  margin: 0 auto;
}
</style>
